<template>
	<view class="attachment-layout">
		<z-paging ref="paging" v-model="dataList" @query="queryList" class="paging" :fixed="false" :auto='false'>
			<template #top>
				<view class="tips">课程导学</view>
			</template>

			<view v-for="(item,index) in dataList" :key="index" class="attachment-container">
				<view class="attachment-item">
					<view class="attachment-item-serial"> {{index + 1}} </view>
					<view class="attachment-item-name"> {{item.name}} </view>
					<uni-icons class="attachment-item-download" type="download" size="22"></uni-icons>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	/**
	 * @property {Number} tabIndex 当前页面属于tabs的那个下标下
	 * @property {Number} current 当前的tabs的下标
	 */

	import {
		nextTick,
		ref,
		watch
	} from 'vue';

	const props = defineProps({
		info: {
			type: Object,
			default: null
		},
		tabIndex: {
			type: Number,
			default: 0
		},
		current: {
			type: Number,
			default: null
		}
	})
	// 首次加载
	const firstLoaded = ref(false)

	const paging = ref(null)

	const dataList = ref([])

	const courseChapterObj = uniCloud.importObject('courseChapterObj')

	watch(() => props.current, (nv, ov) => {
		if (nv == props.tabIndex) {
			if (!firstLoaded.value) {
				nextTick(() => {
					setTimeout(() => {
						paging.value.reload(true)
						firstLoaded.value = true
					}, 100)
				})
			}
		}
	}, {
		immediate: true
	})

	const queryList = async (pageNo, pageSize) => {
		let res = await courseChapterObj.attachment_list(props.info._id, pageNo, pageSize)
		if (res.errCode != 0) {
			paging.value.complete(false)
			return
		}
		paging.value.complete(res.data)
	}
</script>

<style lang="scss" scoped>
	.attachment-layout {
		height: 100%;

		.tips {
			height: 80rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: $me-color-gray-1;
		}

		.attachment-container {
			margin-top: 20rpx;
			padding: 0 20rpx;

			.attachment-item {
				display: flex;
				background-color: $me-color-background;
				padding: 20rpx;
				align-items: center;
				border-radius: 8rpx;

				.attachment-item-serial {
					display: flex;
					width: 30rpx;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					color: $me-color-gray-6;
				}

				.attachment-item-name {
					flex: 1;
					margin-left: 20rpx;
					font-size: 28rpx;
				}

				.attachment-item-download {
					margin-left: 20rpx;
					padding: 0rpx 10rpx;
				}

			}
		}
	}
</style>